import couponsHeader from "../../pages/home/market/coupons/index.scss";
import CouponsTable from "./couponsTable";
import { PlusOutlined } from "@ant-design/icons";
import qingqiu from "../../api/AllHanxin.js";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import {
  Button,
  Form,
  Input,
  Select,
  Col,
  Row,
  Space,
  PageHeader,
  Divider,
  Menu,
  Dropdown,
} from "antd";
import { memo } from "react";
//数据暂存
// const cacheData = [];
const traverse = (arr) => {
  let selectList = [];
  arr.map((v, i) =>
    selectList.push(
      <Select.Option value={v} key={i}>
        {v}
      </Select.Option>
    )
  );
  return selectList;
};
const typeClass = ["全部", "满减券", "折扣券", "兑换券", "随机金额券"];
const statusClass = ["全部", "未开始", "进行中", "已结束"];
const channelClass = ["全部", "微信商城", "App商城", "线下店铺"];
//页头
const routes = [
  {
    path: "index",
    breadcrumbName: "营销管理",
  },
  {
    path: "first",
    breadcrumbName: "优惠券",
  },
];
// 组件
const CouponsHeader = memo(function () {
  let [tableData,setTableData] = useState([]);
  useEffect(() => {
    InitFn();
  },[]);
  const tiaozhuan = useNavigate();
  const jump = (e) => {
    tiaozhuan("/home/market/couponsAdd");
    console.log(e);
  };
//新建下拉菜单

  const getItem = (key, tit) => {
    return {
      key,
      label: tit,
    };
  };
  const items = [
    getItem("AddMan", "满减券"),
    getItem("AddZhe", "折扣券"),
    getItem("AddDui", "兑换券"),
    getItem("AddSui", "随机金额券"),
  ];
  const menu = (
    <Menu
      onClick={(e) => {
        jump(e);
      }}
      items={items}
    />
  );
  const fuck = (id)=>{
    console.log(id);
    
  }
  // 查询
  const [searchForm] = Form.useForm();

  const onFinish = () => {
    console.log(searchForm.getFieldsValue(),"chaxun");
    queryCoupons(searchForm.getFieldsValue());
  };
  // 初始化\
  const InitFn =()=>{
    queryCoupons({})
  }
  // 查询数据
  const queryCoupons = (obj)=>{
    qingqiu.couponsGetData(obj).then((res) => {
      let a = res.data
      let Datas = [...a];
      console.log(Datas);
      for (let i = 0; i < Datas.length; i++) {
        let str = '';
        str = moment(Datas[i].startTime).format("YYYY/MM/DD HH:mm:ss")+"-"+moment(Datas[i].endTime).format("YYYY/MM/DD HH:mm:ss");
        Datas[i].usefulLife = str;
      }
        console.log(Datas);
        setTableData(Datas)
      });
  }
  

  return (
    <div className="couponsHeader" style={couponsHeader.couponsHeader}>
      <div className="header">
        <PageHeader
          className="site-page-header"
          title="优惠券"
          breadcrumb={{
            routes,
          }}
        />
        <Divider plain></Divider>
        <Form
          initialValues={{
            size: "large",
            couponType:"全部",
            state:"全部",
            channel:"全部",
            couponName:""
          }}
          colon={false}
          form={searchForm}
          name="control-hooks"
          size={"large"}
        >
          <Row className="" gutter={40}>
            <Col span={8}>
              <Form.Item
                labelCol={{ offset: 1 }}
                name="couponType"
                label="优惠券类型"
              >
                <Select>{traverse(typeClass)}</Select>
              </Form.Item>
            </Col>

            <Col span={8}>
              <Form.Item labelCol={{ offset: 1 }} name="state" label="状态">
                <Select>{traverse(statusClass)}</Select>
              </Form.Item>
            </Col>
            <Col span={7}>
              <Form.Item
                labelCol={{ offset: 1 }}
                name="channel"
                label="使用渠道"
              >
                <Select>{traverse(channelClass)}</Select>
              </Form.Item>
            </Col>
          </Row>
          <Row className="" gutter={40}>
            <Col span={8}>
              <Form.Item labelCol={{ offset: 1 }} name="couponName" label="名称">
                <Input></Input>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <div className="abs-btns">
          <Space>
            <Button type="primary" size={"large"} onClick={onFinish}>
              查询
            </Button>
            <Button size={"large"}>重置</Button>
          </Space>
        </div>
      </div>
      <div className="couponsTable">
        <div className="flex2">
          <div className="Content-left">
            <h3 className="Advertising-Banner-List">角色列表</h3>
          </div>
          <div className="Content-right">
            <Dropdown overlay={menu} placement="bottom" className="newBtn">
              <Button type="primary" icon={<PlusOutlined />}>
                新建
              </Button>
            </Dropdown>
            <Button className="batchBtn">批量操作</Button>
          </div>
        </div>
        <CouponsTable Datas={tableData} fn={fuck}></CouponsTable>
      </div>
    </div>
  );
});
export default CouponsHeader;
